<template>
  <div class="container">
    <div class="header">
      <h1 class="text-2xl font-bold ">培养方案指定</h1>
      <h3 class="text-gray-500 text-base mt-1">为特定年级专业学生指定培养方案</h3>
    </div>

    <!-- 培养方案信息卡片 -->
    <el-card class="mb-6 rounded-lg shadow-md" v-if="trainingProgramForm.id">
      <template #header>
        <div class="flex flex-col">
          <h2 class="text-2xl font-bold leading-tight">
            {{ trainingProgramForm.name }}
          </h2>
          <p class="text-gray-500 text-sm mt-1">
            方案编号: {{ trainingProgramForm.programCode }}
          </p>
        </div>
      </template>

      <div class="p-4 space-y-4">
        <!-- 第一行：方案编号、方案名称、所属学院、总学分要求 -->
        <el-row :gutter="24" class="mb-4">
          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Document />
              </el-icon>
              <div class="label-value">
                <label class="text-sm text-gray-600">方案编号：</label>
                <span class="text-base">{{ trainingProgramForm.programCode }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Document />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">方案名称：</label>
                <span class="text-base">{{ trainingProgramForm.name }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <School />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">所属学院：</label>
                <span class="text-base">{{ collegeDisplayName }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Menu />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">总学分要求：</label>
                <span class="text-base">{{ trainingProgramForm.totalCredits }} 学分</span>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 第二行：专业、年级、培养方案类型 -->
        <el-row :gutter="24" class="mb-4">
          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Calendar />
              </el-icon>
              <div class="flex items-center label-value">
                <label class="text-sm text-gray-600 mr-2">年级：</label>
                <span class="text-base">{{ trainingProgramForm.grade }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Document />
              </el-icon>
              <div class="flex items-center label-value">
                <label class="text-sm text-gray-600 mr-2">培养方案类型：</label>
                <dict-tag :options="culture_program_type" :value="trainingProgramForm.cultureProgramType" class="dict-tag" />
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <ChatLineSquare />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">英文名称：</label>
                <span class="text-base">{{ trainingProgramForm.englishName }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <User />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">培养方案总人数：</label>
                <span class="text-base">{{ trainingProgramForm.amount }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 第三行：公共必修课学分、专业必修课学分、专业选修课学分、实践环节学分 -->
        <el-row :gutter="24" class="mb-4">
          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Menu />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">公共必修课学分：</label>
                <span class="text-base">{{ trainingProgramForm.degreeCourseCredit }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Menu />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">专业必修课学分：</label>
                <span class="text-base">{{ trainingProgramForm.requiredCourseCredits }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Menu />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">专业选修课学分：</label>
                <span class="text-base">{{ trainingProgramForm.electiveCourseCredits }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Menu />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">实践环节学分：</label>
                <span class="text-base">{{ trainingProgramForm.practiceCredits }}</span>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 第四行：适用学生类型、定制时间、限制条件、培养方案总人数 -->
        <el-row :gutter="24" class="mb-4">
          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <Clock />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">定制时间：</label>
                <span class="text-base">{{ trainingProgramForm.customTime }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="flex items-center gap-3">
              <el-icon :size="24" color="var(--el-color-primary)">
                <User />
              </el-icon>
              <div class="flex items-center">
                <label class="text-sm text-gray-600 mr-2">培养方案附件：</label>
                <el-button
                    type="primary"
                    size="small"
                    :disabled="!trainingProgramForm.attachmentUploadPath"
                    v-if="trainingProgramForm.attachmentUploadPath"
                >
                  查看附件
                </el-button>
                <el-button
                    type="warning"
                    size="small"
                    v-else
                >
                  提交附件
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <div class="header">
      <h1 class="text-2xl font-bold ">关联学科信息</h1>
    </div>
    <!-- 学科信息卡片 -->
    <el-card class="mb-6 rounded-lg shadow-md">
      <div v-if="loadingSubjectInfo" class="loading-container">
        <el-icon color="#409EFF" :size="32" class="is-loading">
          <i class="el-icon-loading"></i>
        </el-icon>
        <span style="margin-left: 10px;">学科信息加载中...</span>
      </div>

      <div v-else-if="subjectInfoList && subjectInfoList.length > 0" class="p-4 space-y-4">
        <div v-for="(subject, index) in subjectInfoList" :key="index" class="subject-info">
          <div class="subject-title" style="font-size: 20px;">
            <label class="text-sm text-gray-600 mr-2">一级学科名称：</label>
            <el-icon :size="20"><i class="el-icon-collection"></i></el-icon>
            {{ subject.firstSubjectName }} ({{ subject.firstSubjectCode }})
          </div>

          <!-- 只有当二级学科代码或名称存在时才显示 -->
          <el-row :gutter="24" v-if="subject.secondSubjectCode || subject.secondSubjectName">
            <el-col :span="12" v-if="subject.secondSubjectCode">
              <div class="flex items-center gap-3" style="font-size: 18px;">
                <el-icon :size="18" color="#67C23A">
                  <i class="el-icon-folder"></i>
                </el-icon>
                <div class="flex items-center" >
                  <label class="text-sm text-gray-600 mr-2">二级学科代码：</label>
                  <span class="text-base">{{ subject.secondSubjectCode }}</span>
                </div>
              </div>
            </el-col>

            <el-col :span="12" v-if="subject.secondSubjectName">
              <div class="flex items-center gap-3" style="font-size: 18px;">
                <el-icon :size="18" color="#67C23A">
                  <i class="el-icon-folder-opened"></i>
                </el-icon>
                <div class="flex items-center">
                  <label class="text-sm text-gray-600 mr-2">二级学科名称：</label>
                  <span class="text-base">{{ subject.secondSubjectName }}</span>
                </div>
              </div>
            </el-col>
          </el-row>

          <!-- 修复后的研究方向列表 -->
          <div v-if="subject.directionReturnVoList && subject.directionReturnVoList.length > 0" class="direction-list">
            <div class="subject-title text-sm" style="font-size: 20px;">
              <el-icon :size="16"><i class="el-icon-connection"></i></el-icon>
              研究方向
            </div>

            <div v-for="(direction, dIndex) in subject.directionReturnVoList" :key="dIndex" class="direction-item">
              <el-icon :size="16"><i class="el-icon-arrow-right"></i></el-icon>
              {{ direction.name }} ({{ direction.researchDirectionCode }})
            </div>
          </div>
        </div>
      </div>
      <div v-else class="no-data">
        <el-icon :size="50"><i class="el-icon-document-delete"></i></el-icon>
        <p>暂无学科信息</p>
      </div>
    </el-card>
    <!-- 学生信息区域 -->
    <div class="header mt-8">
      <h1>该培养方案对应的学生信息</h1>
    </div>

    <!-- 学生信息表格 -->
    <el-card class="rounded-lg shadow-md">
      <el-table
          v-loading="loading"
          :data="studentMangerList"
          @selection-change="handleStudentSelectionChange"
          style="width: 100%;"
          border
      >
        <el-table-column type="selection" width="55" align="center" :selectable="isStudentSelectable" />
        <el-table-column label="学号" align="center" prop="studentId" />
        <el-table-column label="姓名" align="center" prop="studentName" />
        <el-table-column label="所属学院" align="center">
          <template #default="scope">
            <span>{{ getstudentcollegeName(scope.row.studentYx) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="培养方案名称" align="center">
          <template #default="scope">
            {{ getTrainingProgramName(scope.row.trainingProgramId) }}
          </template>
        </el-table-column>
        <el-table-column label="专业" align="center" prop="studentZy" >
          <template #default="scope">
            {{ getstudentMajorName(scope.row.studentZy) }}
          </template>
        </el-table-column>
        <el-table-column label="学生类型" align="center" prop="studentXwlx" />
        <el-table-column label="手机号" align="center" prop="studentSjh" />
      </el-table>
    </el-card>

    <!-- 操作按钮 -->
    <div class="flex justify-end gap-2 mt-6">
      <el-button
          type="primary"
          @click="assignTrainingProgram"
          :disabled="selectedStudents.length === 0 || assigning"
          :loading="assigning"
          size="small"
      >
        确认指定该培养方案 ({{ selectedStudents.length }})
      </el-button>
      <el-button @click="goBack" size="small">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useDict } from '@/utils/dict';
import { listStudentManger, assignTrainingToStudents, listStudentsByTrainingProgramId } from "@/api/student/studentManger";
import { listCollege } from "@/api/college/college";
import { getMajor, listMajor } from "@/api/major/major.js";
import { getCurrentInstance } from 'vue';
import { Document, School, User, Calendar, Menu, ChatLineSquare, Clock, Lock, Folder } from '@element-plus/icons-vue';
import { getSubjectIdListByProgramId } from "@/api/college/researchDirection";
import { updateStatusById } from "@/api/trainingManagement/trainingManagement";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

// 字典数据
const { grade, culture_program_type, culture_category, status } = useDict('grade', 'culture_program_type', 'culture_category', 'status');

// 表单数据
const trainingProgramForm = reactive({
  id: '',
  programCode: '',
  name: '',
  collegeId: '',
  totalCredits: '',
  majorId: '',
  majorName: '',
  englishName: '',
  degreeCourseCredit: '',
  requiredCourseCredits: '',
  grade: '',
  cultureProgramType: '',
  status: '',
  attachmentUploadPath: '',
  limitingCondition: '',
  amount: '',
  customTime: '',
  electiveCourseCredits: '',
  practiceCredits: '',
  studentType: ''
});

const majorForm = reactive({
  majorCode: '',
  majorName: '',
  majorCultureCategory: '',
  educationalSystem: '',
  majorNameEn: '',
  startTime: '',
  majorIntroduction: '',
  disciplineId: ''
});

// 学生列表相关
const studentMangerList = ref([]);
const loading = ref(false);
const selectedStudents = ref([]);
const assigning = ref(false);
const collegeList = ref([]);
const MajorList = ref([]);
const trainingProgramList = ref([]);

// 学科信息列表
const subjectInfoList= ref([]);
const loadingSubjectInfo = ref(false);

// 计算属性
const collegeDisplayName = computed(() => {
  return getCollegeName(trainingProgramForm.collegeId);
});

// 获取学院名称
const getCollegeName = (collegeId) => {
  if (!collegeId) return '-';
  const college = collegeList.value.find(c => c.collegeId === collegeId);
  return college ? `${college.collegeName} (${college.collegeCode})` : '未知学院';
};

// 获取学生学院名称
function getstudentcollegeName(studentYx) {
  if (!studentYx) return '-';
  const college = collegeList.value.find(c => c.collegeCode === studentYx);
  return college ? `${college.collegeName} (${college.collegeCode})` : '未知学院';
}

// 获取培养方案名称
const getTrainingProgramName = (trainingProgramId) => {
  // 如果没有培养方案ID，返回未指定
  if (!trainingProgramId) return '未指定';

  // 如果当前行的培养方案ID与页面展示的培养方案ID一致，则显示方案名称
  if (trainingProgramId === trainingProgramForm.id) {
    return trainingProgramForm.name;
  }

  // 否则显示为"已指定其他方案"
  return '已指定其他方案';
};

// 判断学生是否可选择
const isStudentSelectable = (row) => {
  return !row.trainingProgramId;
};

// 处理学生选择变化
const handleStudentSelectionChange = (selection) => {
  selectedStudents.value = selection;
};

// 指定培养方案
const assignTrainingProgram = async () => {
  if (selectedStudents.value.length === 0) {
    proxy.$modal.msgWarning("请至少选择一名学生");
    return;
  }

  assigning.value = true;
  try {
    const requestData = {
      trainingProgramId: trainingProgramForm.id,
      studentIds: selectedStudents.value.map(s => s.id)
    };

    // 执行培养方案指定操作
    const response = await assignTrainingToStudents(requestData);
    if (response.code === 200) {
      proxy.$modal.msgSuccess(response.msg);

      // 调用updateStatusById接口，将培养方案状态更新为4
      try {
        const statusResponse = await updateStatusById(trainingProgramForm.id, 4);
        if (statusResponse.code === 200) {
          console.log(`培养方案 ${trainingProgramForm.id} 状态已更新为4`);
          proxy.$modal.msgSuccess("培养方案状态已更新为完成");
        } else {
          console.error("更新培养方案状态失败:", statusResponse.msg);
          proxy.$modal.msgWarning("培养方案指定成功，但状态更新失败");
        }
      } catch (error) {
        console.error("更新培养方案状态时发生错误:", error);
        proxy.$modal.msgWarning("培养方案指定成功，但状态更新失败");
      }

      // 重新加载学生列表
      await loadStudentList();
      selectedStudents.value = [];
    } else {
      proxy.$modal.msgError(response.msg || "分配失败，请稍后重试");
    }
  } catch (error) {
    console.error("分配培养方案出错:", error);
    proxy.$modal.msgError("分配过程中发生错误");
  } finally {
    assigning.value = false;
  }
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};

// 加载学院列表
const loadCollegeList = async () => {
  try {
    const response = await listCollege();
    collegeList.value = response.rows || [];
  } catch (error) {
    console.error("加载学院列表失败:", error);
    proxy.$modal.msgError("学院数据加载失败");
  }
};

// 加载专业信息
const loadMajorInfo = async () => {
  if (!trainingProgramForm.majorId) return;

  try {
    const response = await getMajor(trainingProgramForm.majorId);
    if (response.code === 200 && response.data) {
      majorForm.majorName = response.data.majorName;
      majorForm.majorCode = response.data.majorCode;
      majorForm.majorCultureCategory = response.data.cultureCategory;
      majorForm.startTime = response.data.startTime;
      majorForm.educationalSystem = response.data.educationalSystem;
      majorForm.majorIntroduction = response.data.majorIntroduction;
      majorForm.disciplineId= response.data.disciplineId;
      majorForm.majorNameEn = response.data.majorNameEn;
    }
  } catch (error) {
    console.error("加载专业信息失败:", error);
    proxy.$modal.msgError("专业信息加载失败");
  }
};

// 加载学生列表 - 使用培养方案ID获取学生
const loadStudentList = async () => {
  // 验证培养方案ID是否存在
  if (!trainingProgramForm.id) {
    console.warn("培养方案ID不存在，无法加载学生列表");
    return;
  }

  loading.value = true;
  try {
    // 打印获取到的培养方案ID
    console.log(`正在获取培养方案ID为 ${trainingProgramForm.id} 的学生列表`);
    // 调用API方法，传入培养方案ID
    const response = await listStudentsByTrainingProgramId(trainingProgramForm.id);

    if (response.code === 200) {
      // 根据API返回结构调整，适配不同可能的响应格式
      studentMangerList.value = response.data || response.rows || [];
      console.log(`成功加载 ${studentMangerList.value.length} 名学生`);
    } else {
      console.error("获取学生列表失败:", response.msg);
      proxy.$modal.msgError("获取学生列表失败: " + (response.msg || "未知错误"));
    }
  } catch (error) {
    console.error("获取学生列表失败:", error);
    proxy.$modal.msgError("获取学生列表失败，请检查网络连接");
  } finally {
    loading.value = false;
  }
};

// 获取学生专业名称
const getstudentMajorName = (studentZy) => {
  if (!studentZy) return '-';

  // 先检查缓存中是否有该专业信息
  const cachedMajor = MajorList.value.find(m => m.majorCode === studentZy);
  if (cachedMajor) {
    return cachedMajor.majorName;
  }

  // 如果缓存中没有，异步获取并更新显示
  fetchAndCacheMajorName(studentZy);

  // 暂时返回原始值，获取后会自动更新
  return studentZy;
};

// 异步获取专业名称并缓存
const fetchAndCacheMajorName = async (studentZy) => {
  try {
    const response = await listMajor({ majorCode: studentZy });
    if (response.code === 200 && response.rows && response.rows.length > 0) {
      const major = response.rows[0];

      // 检查是否已经缓存
      const isAlreadyCached = MajorList.value.some(m => m.majorCode === studentZy);
      if (!isAlreadyCached) {
        // 添加到缓存
        MajorList.value.push(major);

        // 触发视图更新
        studentMangerList.value = [...studentMangerList.value];
      }
    }
  } catch (error) {
    console.error(`获取专业信息失败，专业代码: ${studentZy}`, error);
  }
};

// 初始化数据
const initData = async () => {
  // 从路由参数中获取培养方案信息
  trainingProgramForm.id = route.query.id || '';
  trainingProgramForm.programCode = route.query.programCode || '';
  trainingProgramForm.name = route.query.name || '';
  trainingProgramForm.collegeId = route.query.collegeId || '';
  trainingProgramForm.totalCredits = route.query.totalCredits || '';
  trainingProgramForm.majorId = route.query.majorId || '';
  trainingProgramForm.englishName = route.query.englishName || '';
  trainingProgramForm.degreeCourseCredit = route.query.degreeCourseCredit || '';
  trainingProgramForm.requiredCourseCredits = route.query.requiredCourseCredits || '';
  trainingProgramForm.grade = route.query.grade || '';
  trainingProgramForm.cultureProgramType = route.query.cultureProgramType || '';
  trainingProgramForm.status = route.query.status || '';
  trainingProgramForm.attachmentUploadPath = route.query.attachmentUploadPath || '';
  trainingProgramForm.limitingCondition = route.query.limitingCondition || '';
  trainingProgramForm.amount = route.query.amount || '';
  trainingProgramForm.customTime = route.query.customTime || '';
  trainingProgramForm.electiveCourseCredits = route.query.electiveCourseCredits || '';
  trainingProgramForm.practiceCredits = route.query.practiceCredits || '';
  trainingProgramForm.studentType = route.query.studentType || '';
  trainingProgramForm.totalCredits = route.query.totalCredits || '';

  // 获取专业名称
  trainingProgramForm.majorName = route.query.majorName || '' ;
  console.log('获取到的培养方案ID:', trainingProgramForm.id);
  // 加载相关数据
  await loadCollegeList();
  await loadMajorInfo();

  // 获取培养方案关联的学科信息
  if (trainingProgramForm.id) {
    loadingSubjectInfo.value = true;
    try {
      const res = await getSubjectIdListByProgramId(trainingProgramForm.id);
      if (res.code === 200) {
        subjectInfoList.value = res.data;
      } else {
        proxy.$modal.msgError(res.msg || "获取学科信息失败");
      }
    } catch (error) {
      console.error("获取学科信息失败:", error);
      proxy.$modal.msgError("获取学科信息失败");
    } finally {
      loadingSubjectInfo.value = false;
    }
  }

  // 使用培养方案ID加载学生列表
  if (trainingProgramForm.id) {
    await loadStudentList();
  } else {
    proxy.$modal.msgWarning("未获取到培养方案ID，无法加载学生列表");
  }
};

// 页面加载时初始化
onMounted(() => {
  initData();
});
</script>

<style scoped>
/* 强制 dict-tag 组件内容在同一行内展示 */
.dict-tag {
  display: inline-block;
  vertical-align: middle;
}

/* 调整标签和值之间的间距 */
.label-value {
  display: flex;
  align-items: center;
}

.label-value label {
  margin-right: 8px;
}

/* 基础布局样式 */
.container {
  padding: 20px;
}

.header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: black;
}

.header h3 {
  font-size: 0.875rem;
  color: #666;
  margin-top: 4px;
}

/* 卡片样式 */
.el-card {
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-card:hover {
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* 表格样式 */
.el-table {
  width: 100%;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}

/* 间距样式 */
.mt-1 { margin-top: 4px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

/* 响应式调整 */
@media (max-width: 768px) {
  .el-table {
    font-size: 12px;
  }

  .el-col {
    width: 100% !important;
  }
}

.subject-info {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  background-color: #f9fafc;
}

.subject-title {
  font-weight: 600;
  margin-bottom: 10px;
  color: #409EFF;
  display: flex;
  align-items: center;
}

.subject-title i {
  margin-right: 8px;
}

.direction-list {
  margin-left: 20px;
  margin-top: 10px;
}

.direction-item {
  padding: 8px 12px;
  background: white;
  border-radius: 4px;
  margin-bottom: 8px;
  border-left: 3px solid #67C23A;
  display: flex;
  align-items: center;
}

.direction-item i {
  margin-right: 8px;
  color: #67C23A;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.no-data {
  text-align: center;
  padding: 30px;
  color: #909399;
}

.no-data i {
  font-size: 50px;
  margin-bottom: 15px;
  color: #C0C4CC;
}
</style>
